<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/sign.css"/>
		<script src="js/jquery-3.1.1.min.js"></script>
		
		<title></title>
	</head>
	<body>
		<div class="header">
			<div class="ab">
				<a href="login.html">返回</a>
			</div>
			<span>淘宝注册</span>
			<div></div>
		</div>
		<div class="bt">
			为了您的账号安全请填写一个手机号完成验证
		</div>
		<ul>
			<li>
				<span>手机号</span>
				<input type="text" class="telephone"/>
				<p class="tele_reminder">请输入手机号</p>
			</li>
			<li>
				<span>密码</span>
				<input type="password" class="password"/>
				<p class="pass_reminder">请输入密码</p>
			</li>
		</ul>
		<div class="footer" id="dl">
			<div class="dl">
				确&nbsp;定
			</div>
	    </div>
	    
	    <div class="reminder">
			
		</div>

		<script>


    (function () {
        size();
        window.onresize = function () {
            size();
        }
        function size() {
            var winW = document.documentElement.clientWidth || document.body.clientWidth;
            document.documentElement.style.fontSize =  (winW / 375)*100 + "px";
        }
    })()


//正则
var reg_phone=/^1[34578]\d{9}$/;
var reg_pass=/^[\w-`=\\\[\];',./~!@#$%^&*()_+|{}:">?]{6,}$/;
//手机号和密码的初始状态
var flag_phone=false;
var flag_pass=false;
//电话号这行失去焦点触发的事件
$('.telephone').blur(function(){
	var telephone=$(this).val();
	if (telephone=='') {
		$('.tele_reminder').text('不能为空');
		flag_phone=false;
	} else if(reg_phone.test(telephone)){
		$('.tele_reminder').text('格式正确');
		flag_phone=true;
	} else{
		$('.tele_reminder').text('格式错误');
		flag_phone=false;
	}
})
//密码这行失去焦点触发的事件
$('.password').blur(function(){
	var password=$(this).val();
	if (password=='') {
		$('.pass_reminder').text('不能为空');
		flag_pass=false;
	} else if(reg_pass.test(password)){
		$('.pass_reminder').text('格式正确');
		flag_pass=true;
	} else{
		$('.pass_reminder').text('格式错误');
		flag_pass=false;
	}
})
//
$('.telephone').focus(function(){
	$('.reminder').text('');
})
//
$('.footer').click(function(){
	var phone=$('.telephone').val();
	var pass=$('.password').val();
	if (flag_phone&&flag_pass) {
		$.ajax({
			type:"post",
			url:"http://47.92.37.168/supermarket/data/register.php",
			async:true,
			data:{
				'user_phone':phone,
				'user_pass_word':pass
			},
			dataType:"jsonp",
			jsonp:"callback",
			jsonpCallback:"success_JsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
			success:function(data){
				console.log(data);				
				if (data.msg=='success') {
					alert('success')
					sessionStorage.setItem('username',phone);
					//alert("注册成功")
					location.href="login.html";
				} else if(data.msg=='error'){
					$('.reminder').text(data.reason);
				}
			},
			error:function(){
				alert('error!');
			}
		})
	}
})
</script>
	</body>
</html>
